<template>
    <div>
        <Head><h1>我的钱包明细</h1></Head>

        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
<!--            <van-cell  :key="item.id" :title="item.operateNote" ></van-cell>-->

            <van-panel v-for="item in list" title="单号：" :desc="item.operateNote" :status="item.orderNo">
                <div slot="footer">
                    <van-button size="small" v-if="item.isPay === 1">已支付</van-button>
                    <van-button size="small" v-if="item.isPay === 2">订单已取消</van-button>
                    <van-button size="small" v-if="item.isPay === 0 && item.status !== 3" type="danger" @click="payOrderNo(item.orderNo,item.status)">待支付</van-button>
                    <van-button size="small" v-if="item.isPay === 0" type="info" @click="cancelPayment(item.orderNo,item.status)">取消订单</van-button>
                </div>
                <van-skeleton
                        title
                        avatar
                        :row="5"
                        :loading="loading">
                    <div style="padding-left: 20px;font-size: 16px">
                        金额：<span :style="{color: item.amountType === 1?'green':'red'}">{{item.amountType === 1?'+':'-'}} {{item.amount}}</span></div>
                        <div style="float: right;padding-right: 20px;font-size: 16px">{{item.createTime}}</div>
                    <div style="padding-left: 20px;font-size: 16px">
                        积分：<span :style="{color: item.changeType === 1?'green':'red'}">{{item.changeType === 1?'+':'-'}} {{item.changeCount}}</span></div>
                    <div style="float: right;padding: 10px 20px;font-size: 14px ">
                        <sapn :style="{backgroundColor: item.status === 1?'green':item.status===2?'#1885fe':'#f08c29',color:'#fff',padding:'2px',borderRadius: '5px'}">{{item.status===1?'微信':item.status===2?'支付宝':'余额租车'}}</sapn></div>
                </van-skeleton>
            </van-panel>

        </van-list>

        <van-dialog v-model="dialogVisible" :show-cancel-button="true" :close-on-click-overlay="true" @cancel="cancel" @confirm="cancel">
            <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
                <vue-qr
                        :text="payResult.codeUrl"
                        :margin="0"
                        colorDark="green"
                        :logoSrc="require('@/assets/logo.png')"
                        colorLight="#fff"
                        :size="200">
                </vue-qr>
            </div>
        </van-dialog>

    </div>
</template>

<script>
    import Head from "../jingtai_/header";
    import vueQr from "vue-qr"
    export default {
        name: "WalletInfo",
        components: {
            Head,vueQr
        },
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                dialogVisible:false,
                payResult:{},
                timer:'',
            };
        },
        created() {
            this.onLoad();
        },
        methods: {
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.$http.get("/client/IntegrationHistory/web/getOne").then(resp=>{
                        if(resp.data.code===200){
                            this.list = resp.data.data;
                            console.log(this.list)
                        }
                    })

                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 2) {
                        this.finished = true;
                    }

                }, 1000);
            },

            cancelPayment(orderNo){
                this.$http.get("/client/IntegrationHistory/web/cancelPayment/" + orderNo).then(resp => {
                    if (resp.data.code === 200){
                        this.$message.success(resp.data.data);
                        this.onLoad();
                    }else {
                        this.$message.error(resp.data.msg);
                    }
                })
            },

            cancel(){
                //消除定时器
                clearInterval(this.timer)
                this.timer=null;
                this.$message.success("挂起支付");
            },

            payOrderNo(orderNo,status){
                this.$http.get("/client/IntegrationHistory/web/payExistingOrder/" + orderNo+ "/" + status).then(resp => {
                    if (resp.data.code === 200){
                        this.payResult = resp.data.data;
                        this.dialogVisible = true;
                        //设置一个定时任务，每隔3秒调用一次
                        this.timer = setInterval(() => {
                            this.queryPayStatus(orderNo,status)
                        }, 20000);
                    }else {
                        this.$message.error(resp.data.msg);
                    }

                })
            },

            //查询订单状态
            queryPayStatus(orderNo,status){
                this.$http.get("/client/IntegrationHistory/web/queryPayStatus/"+orderNo + "/" + status).then(resp=>{
                    if(resp.data.code===200){
                        //消除定时器
                        clearInterval(this.timer)
                        this.timer=null;
                        this.$message.success("支付成功");
                        this.dialogVisible=false;
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
